//点击标签显示详情信息
import React from 'react';
import './index.css';
import Blank from '../Blank';
import RightSolid from '../../Common/svg/RightSolid';
import Down from '../../Common/svg/Down';
import "../../Common/css/common.css"
import MessageUtil from '../../utils/MessageUtil';
// import MessageUtil from '../../utils/MessageUtil';

export default class MoreInfoBox extends React.Component{
    constructor(props){
        super();
        //默认下拉处于关闭
        let visible="none";
        if(props.visible!==undefined && props.visible!=null){
            visible=props.visible;
        }
        this.state={
            title:props.title,
            desc:props.desc,
            visible:visible,
            downSvg:"none",
            rightSvg:""
        }
    }
    UNSAFE_componentWillReceiveProps(props){
        let visible="none";
        if(props.visible!==undefined && props.visible!=null){
            visible=props.visible;
        }
        this.setState({
            title:props.title,
            desc:props.desc,
            visible:visible,
            downSvg:"none",
            rightSvg:""
        });
    }
    showDesc(e){
        if(this.state.visible==="none"){
            this.setState({
                visible:"",
                downSvg:"",
                rightSvg:"none"
            },()=>{
                MessageUtil.ChangeHeight();
            });
        }
        else{
            this.setState({
                visible:"none",
                downSvg:"none",
                rightSvg:""
            },()=>{
                MessageUtil.ChangeHeight();
            });
        }
        // MessageUtil.ChangeHeight();
    }
    render(){
        let titleBottom="";
        if(this.state.rightSvg===""){
            titleBottom="MoreInfoBox_Padding_Desc";
        }
        return(
            <div className="MoreInfoBox_BackGround NoSelect">
                <div className={"flexContainer MoreInfoBox_Padding_Title "+titleBottom} onClick={e=>this.showDesc(e)}>{this.state.title}
                    <Blank/><span style={{display:this.state.rightSvg}}><RightSolid/></span>
                            <span style={{display:this.state.downSvg}}><Down/></span>
                </div>
                <div style={{display:this.state.visible}} className="MoreInfoBox_Padding">
                    <div><hr className="MoreInfoBox_HR"/></div>
                    {this.state.desc}
                </div>
            </div>
        )
    }
}